<template>
<!-- 打开安装分发头部组件 -->
<div class="block">
    <div>
        <span class="demonstration">统计方式: &nbsp;</span>
        <el-radio-group v-model="headerData.radio">
            <el-radio :label="1">PV</el-radio>
            <el-radio :label="2">UV</el-radio>
            <el-radio :label="3">IP</el-radio>
            <el-radio :label="4">UV+APPID</el-radio>
            <el-radio :label="5">IP+APPID</el-radio>
        </el-radio-group>
        <el-checkbox v-model="headerData.check">云控</el-checkbox>
        <el-checkbox v-model="headerData.isCom">组合杀软</el-checkbox>
    </div>
    <br />
    <el-date-picker style="margin-bottom: 15px;" v-model="headerData.starttime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="开始日期">
    </el-date-picker>
    <el-date-picker style="margin-bottom: 15px;" v-model="headerData.endtime" default-value type="date" size="small" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="结束日期">
    </el-date-picker>
    <el-select v-model="headerData.channelType" @change="toEmptyChannel" size="small" filterable clearable placeholder="渠道类型选择">
        <el-option v-for="item in headerData.channelTypeOptions" :key="item.appType" :label="item.typeName" :value="item.appType">
        </el-option>
    </el-select>
    <el-select size="small" style="margin-bottom: 15px;" @focus="getAppType" v-model="headerData.appType" multiple filterable placeholder="站点类型选择">
        <el-option v-for="item in headerData.appTypeOptions" :key="item.typeName" :label="item.typeName" :value="item.appType">
        </el-option>
    </el-select>
    <el-select size="small" @focus="getApp" v-model="headerData.appid" multiple filterable placeholder="渠道选择">
        <el-option v-for="item in headerData.appidOptions" :key="item.appname" :label="item.appname" :value="item.appid">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.area" @change="areachange" multiple filterable placeholder="地区选择">
        <el-option v-for="item in headerData.areaOptions" :key="item" :label="item" :value="item">
        </el-option>
    </el-select>
    <el-select size="small" @focus="findProv" v-model="headerData.prov" multiple filterable placeholder="省份选择">
        <el-option v-for="item in headerData.provOptions" :key="item" :value="item">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.winnt" multiple filterable placeholder="系统选择">
        <el-option v-for="item in headerData.winntOptions" :key="item.winntname" :label="item.winntname" :value="item.winntid">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.wow" multiple filterable placeholder="位数选择">
        <el-option v-for="item in headerData.wowOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.antiVirus" multiple filterable placeholder="杀软环境">
        <el-option v-for="item in headerData.antiVirusOptions" :key="item.id" :label="item.aname" :value="item.id">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.isBar" filterable placeholder="网吧量">
        <el-option v-for="item in headerData.isBarOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.isDev" filterable placeholder="开发者环境">
        <el-option v-for="item in headerData.isDevOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-select size="small" v-model="headerData.isVersionSel" filterable placeholder="版本选择">
        <el-option v-for="item in headerData.isVersionSelOption" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <br />
    <el-button type="primary" icon="el-icon-search" size="small" @click="setMsg">搜索</el-button>
    <el-button type="primary" size="small" @click="OutputExcel">导出excel</el-button>
</div>
</template>

<script>
export default {
    data() {
        let showDate = new Date();
        let seperator = '-';
        let year = showDate.getFullYear();
        let month = showDate.getMonth() + 1;
        let day = showDate.getDate();
        var strDate = showDate.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        return {
            pageRenderURL: '' + this.$store.state.domain + '/bzDCP/pageRender/all/open',
            getProvinceURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getProvince',
            getAppURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getApp',
            getAppTypeURL: '' + this.$store.state.domain + '/bzDCP/pageRender/getAppType',
            headerData: {
                starttime: currentdate, //开始日期
                endtime: currentdate, //结束日期
                radio: 1,
                check: true,
                isCom: false,
                //站点类型选择
                appTypeOptions: [],
                appType: [],
                //渠道选择
                appidOptions: [],
                appid: [],
                //渠道类型选择
                channelTypeOptions: [],
                channelType: [],
                // 地区选择
                areaOptions: [],
                area: [],
                //省份选择
                provOptions: [],
                prov: [],
                //系统选择
                winntOptions: [],
                winnt: [],
                //位数选择
                wowOptions: [{
                    value: '32'
                }, {
                    value: '64'
                }, {
                    label: '其他',
                    value: '2'
                }],
                wow: [],
                //杀软环境
                antiVirusOptions: [],
                antiVirus: [],
                //网吧量
                isBarOption: [{
                    value: 1,
                    label: '网吧量 — 是'
                }, {
                    value: 0,
                    label: '网吧量 — 否'
                }, {
                    value: '2',
                    label: '网吧量 — 全部'
                }],
                isBar: [],
                //开发者环境
                isDevOption: [{
                    value: 1,
                    label: '开发者环境 — 是'
                }, {
                    value: 0,
                    label: '开发者环境 — 否'
                }, {
                    value: '2',
                    label: '开发者环境 — 全部'
                }],
                isDev: [],
                isVersionSelOption: [{
                    value: 1,
                    label: '版本选择 — 三页版本'
                }, {
                    value: 0,
                    label: '版本选择 — 四页版本'
                }, {
                    value: '2',
                    label: '版本选择 — 全部'
                }],
                isVersionSel: []
            },

        }
    },
    mounted() {
        let _this = this.headerData;
        this.$ajax.post(this.pageRenderURL, this.qs.stringify({}))
            .then((response) => {
                if (response.status == 200) {
                    _this.areaOptions = response.data.area;
                    _this.provOptions = response.data.prov;
                    _this.winntOptions = response.data.winnt;
                    // _this.appTypeOptions = response.data.appType;
                    _this.channelTypeOptions = response.data.channelType;
                    // for (let i = 0; i < response.data.app.length; i++) {
                    //     let appname = response.data.app[i];
                    //     _this.appidOptions.push(appname);
                    // }
                    for (let j = 0; j < response.data.antiVirus.length; j++) {
                        let aname = response.data.antiVirus[j];
                        _this.antiVirusOptions.push(aname);
                    }
                } else {
                    console.log(response.statusText);
                }

            }).catch((err) => {
                console.log(err);
            });
    },
    methods: {
        toEmptyChannel() {
            if (this.headerData.appType != '' || this.headerData.appid != '') {
                this.headerData.appType = '';
                this.headerData.appid = '';
            }
        },
        setMsg(data) {
            this.$emit('getMsg', this.headerData);
        },
        OutputExcel() {
            //该导出仅用于headerData中时间区间用starttime和endtime表示
            let baseurl = this.baseExcelURL; //从props传来的api接口
            let Optionurl = '?';
            //拼接传给API的数据地址
            for (let item in this.headerData) {
                if (!item.includes('Option')) { //区别下拉框的配置,这里剔除Options
                    Optionurl += `${item}=${this.headerData[item]}&`
                }
            }
            Optionurl = Optionurl.substring(0, Optionurl.length - 1); //删除最后一个&
            window.open(baseurl + Optionurl); //下载表格
        },
        //地区省份二级联动
        areachange() {
            if (this.headerData.prov != '')
                this.headerData.prov = '';
        },
        findProv() {
            this.$ajax
                .post(this.getProvinceURL,
                    this.qs.stringify({
                        area: this.headerData.area
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.headerData.provOptions = response.data;
                    } else {
                        console.log(response.statusText);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        // 获取渠道
        getApp() {
            this.$ajax
                .post(this.getAppURL,
                    this.qs.stringify({
                        appType: this.headerData.appType,
                        check: this.headerData.check,
                        channelType: this.headerData.channelType
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    this.headerData.appidOptions = response.data.app;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getAppType() {
            this.$ajax
                .post(this.getAppTypeURL,
                    this.qs.stringify({
                        channelType: this.headerData.channelType
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    this.headerData.appTypeOptions = response.data.appType;

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    },
    props: {
        headerConfig: {
            type: Object
        },
        baseExcelURL: {
            type: String
        }
    }
};
</script>

<style scoped>
.el-select.el-select--small {
    margin-bottom: 15px;
}
.block{
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    padding: 12px;
    min-width: 1317px;
}
</style>
